<template>
  <div class="apporintment">
    <pop-window v-if="pop"  :date = "date" :pop = "pop" :clickTime = "clickTime" @changepop = "popevent($event)"></pop-window>
    <p-back class="head"></p-back>
    <div class="book-detail">
      <div class="select">
        <h3>你的信息</h3>
        <input type="text" placeholder="你的姓名" v-model="privateInfo.uname">
        <input type="text" placeholder="你的电话" v-model="privateInfo.tel">
        <input type="text" placeholder="你的邮箱" v-model="privateInfo.mail">
      </div>
      <div class="select">
        <h3>领养日期</h3>
        <van-cell title="选择日期" :value="date" @click="show = true" is-link icon="calendar-o"/>
        <van-calendar v-model="show" @confirm="onConfirm" color="#4895f2" />
      </div>
      <div class="select">
        <h3>选择时间</h3>
        <div class="time-list">
          <filter-click v-for="(time,index) in AM" :key="index" class="time" @click.native="confirmTime(time)" :class="time === clickTime ? 'click-noon' : ''">{{time}}</filter-click>
          <div class="noon-line">
            <p class="noon">下午</p>
          </div>
          <filter-click v-for="(time,index) in PM" :key="index + 't'" class="time" @click.native="confirmTime(time)" :class="time === clickTime ? 'click-noon' : ''">{{time}}</filter-click>
        </div>
      </div>
      <p-button @click.native="order()">提交订单</p-button>
    </div>
  </div>
</template>
<script>
import { getuserInfo,createOrder } from '@/api.js'
import PopWindow from '@/components/popWindow.vue'
import PBack from '@/components/back.vue'
import FilterClick from '@/components/filterClick.vue'
import PButton from '@/components/button.vue'
import { Notify } from 'vant'
export default {
  components:{
    PBack,
    FilterClick,
    PButton,
    PopWindow
  },
  data() {
    return {
      AM:['08:00 AM','09:00 AM','10:00 AM','11:00 AM','12:00 AM'],
      PM:['14:00 PM','15:00 PM','16:00 PM','17:00 PM','18:00 PM'],
      clickTime:'',
      date:'',
      show:false,
      privateInfo:{},
      pop:false
    }
  },
  created() {
    this.getPrivateInfo()
  },
  methods:{
    popevent(msg) {
      this.pop = msg
      this.$router.go(-1)
    },
    async order() {
      
        if(!this.date || !this.clickTime){
          Notify('请选择领养时间')
        }else{
          try {
              let user_id = JSON.parse(localStorage.getItem('user'))
              let pid = this.$route.params.id
              let aid = this.$route.params.aid
              let {uname, mail, tel} = {...this.privateInfo}
              let params = {user_id, pid, aid, name:uname, mail, tel, create_time:new Date(), book_time:this.clickTime, book_date:this.date}
              const { data,success } = await createOrder(params)
              if(success) {
                this.pop = true
              }else{
                console('添加失败')
              }
            } catch (error) {
              Notify({ type: 'warning', message: '请勿重复预订同一宠物' });
          }
        }
        
     

    },
    confirmTime(time){
      this.clickTime = time
    },
    formatDate(date) {
      return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate() + 1}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    async getPrivateInfo(){
      let user = JSON.parse(localStorage.getItem('user'))
      let userInfo ={mail:user}  
      const {data} = await getuserInfo(userInfo)
      this.privateInfo = data
    }
  }
}
</script>
<style lang="less" scoped>
.apporintment{
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  input::placeholder{
    color:#bab3b3;
  }
  .head{
  background: white;
  position: fixed;
  width: 100%;
  }
  .book-detail{
    padding: 0.5rem;
    margin-top: 1.5rem;
    .select{
      font-size: 0.4rem;
      margin-bottom: 0.4rem;
      input {
        font-size: 0.4rem;
      }
      h3{
        font-size: 0.5rem;
        margin-bottom: 0.5rem;
      }
      input{
        width: 100%;
        height: 1rem;
        margin-bottom: 0.3rem;
        border-bottom: 0.01rem solid #dcd0d0;
      }
      .van-cell{
        padding-left: 0;
        color: #bab3b3;     
      }
      .time-list{
        display: flex;
        flex-wrap: wrap;
        .time{
          width: 30%;
        }
        .click-noon{
          background: #7db6fa;
          color: white;
        }
      }
      .noon-line{
        border-bottom:0.01rem solid #bab3b3;
        width: 100%;
        position: relative;
        margin:0.5rem 0 0.8rem;
        .noon {
          background: white;
          width: 2rem;
          text-align: center;
          position: absolute;
          top:-0.2rem;
          left: 0;
          right: 0;
          margin:0 auto;
          color: #857f85;
        }      
      }
  }
}
}
</style>